<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部组件</title>
    <!-- 引入vue.js -->
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- 挂载点 -->
        <div id="app">
           <my-component></my-component>
           <my-component></my-component>
           <my-component></my-component>
           <my-component></my-component>
        </div>
    <!-- 使用javascript 脚本 -->
        <script type="text/javascript">
        // 局部组件的模板 变量   通过一个普通的 JavaScript 对象来定义组件
        var myComponent = {
            template: ' <div>\
                <p>我是色板</p>\
                <input type="color"/>\
            </div>'
        }
        //创建app vue实例
        var app = new Vue({
               el: '#app',
               components: {
                   'my-component': myComponent
               } 
        })

        </script>
</body>
</html>